<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务管理 - 创建业务</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .form-error {
            color: #dc3545;
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="module" src="../js/components/navigation.js"></script>
    <script type="module" src="../js/utils.js"></script>
    <script type="module" src="../js/api.js"></script>
</head>
<body>
<div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner"></div>
</div>

<div class="toast" id="toast"></div>

<div class="app-container">
    <header class="app-header">
        <div class="logo">
            <i class="fas fa-building"></i> 员工管理系统
        </div>
        <div class="user-info">
            <span id="username-display" class="username">管理员</span>
            <button id="logout-btn" class="btn btn-secondary">
                <i class="fas fa-sign-out-alt"></i> 退出登录
            </button>
        </div>
    </header>

    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group active">
                        <a href="#" class="menu-item active">业务管理</a>
                        <ul class="submenu">
                            <li><a href="list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="create.html" class="submenu-item active">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <div class="page-header">
                <h1><i class="fas fa-project-diagram"></i> 创建业务</h1>
                <div class="breadcrumb">
                    <a href="#"><i class="fas fa-home"></i> 首页</a> &gt;
                    <a href="list.html"><i class="fas fa-project-diagram"></i> 业务管理</a> &gt;
                    <span><i class="fas fa-plus-circle"></i> 创建业务</span>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2>业务信息表单</h2>
                </div>
                <div class="card-body">
                    <form id="create-business-form">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="name" class="form-label">业务名称 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-tag"></i></span>
                                    </div>
                                    <input type="text" id="name" name="name" class="form-control" placeholder="请输入业务名称">
                                </div>
                                <div class="form-error" id="name-error"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="status" class="form-label">状态 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-clipboard-check"></i></span>
                                    </div>
                                    <select id="status" name="status" class="form-control">
                                        <option value="">请选择状态</option>
                                        <option value="未开始">未开始</option>
                                        <option value="进行中">进行中</option>
                                        <option value="已完成">已完成</option>
                                        <option value="已暂停">已暂停</option>
                                    </select>
                                </div>
                                <div class="form-error" id="status-error"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="startDate" class="form-label">开始日期 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                    </div>
                                    <input type="date" id="startDate" name="startDate" class="form-control">
                                </div>
                                <div class="form-error" id="startDate-error"></div>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="endDate" class="form-label">结束日期 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-calendar-check"></i></span>
                                    </div>
                                    <input type="date" id="endDate" name="endDate" class="form-control">
                                </div>
                                <div class="form-error" id="endDate-error"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="revenue" class="form-label">预计收入 <span class="required">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-money-bill-wave"></i></span>
                                    </div>
                                    <input type="number" id="revenue" name="revenue" class="form-control" placeholder="请输入预计收入" step="0.01">
                                </div>
                                <div class="form-error" id="revenue-error"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="description" class="form-label">业务描述</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-align-left"></i></span>
                                    </div>
                                    <textarea id="description" name="description" class="form-control" rows="4" placeholder="请输入业务描述"></textarea>
                                </div>
                                <div class="form-error" id="description-error"></div>
                            </div>
                        </div>

                        <div class="action-buttons">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 提交
                            </button>
                            <a href="list.html" class="btn btn-secondary">
                                <i class="fas fa-times"></i> 取消
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    // 简单的验证工具对象
    const Validator = {
        isDate: function(value) {
            return !isNaN(Date.parse(value));
        },
        isMoney: function(value) {
            return !isNaN(parseFloat(value)) && isFinite(value);
        }
    };

    $(document).ready(function () {
        // 将表单form提交事件
        $("#create-business-form").on("submit", function(e) {
            e.preventDefault();

            let name = $("#name").val();
            let description = $("#description").val();
            let startDate = $("#startDate").val();
            let endDate = $("#endDate").val();
            let status = $("#status").val();
            let money = $("#revenue").val();

            if(validateForm()) {
                // 显示加载动画
                $("#loading-overlay").show();

                // 发送AJAX请求到后端
                $.ajax({
                    url: "../businessControl/create",
                    type: "GET",
                    data: {
                        name: name,
                        description: description,
                        startDate: startDate,
                        endDate: endDate,
                        status: status,
                        money: money
                    },
                    dataType: "json",
                    success: function(response) {
                        $("#loading-overlay").hide();
                        if (response) {
                            alert("业务创建成功！点击确认回到业务列表查看.");
                                window.location.href = "list.html";
                        } else {
                            alert("业务创建失败，请重试")
                            window.location.href = "list.html";

                        }
                    },
                    error: function(xhr, status, error) {
                        $("#loading-overlay").hide();
                        $("#toast").addClass("error").text("请求失败: " + error).fadeIn().delay(2000).fadeOut();
                    }
                });
            } else {
                $("#toast").addClass("error").text("请正确填写所有必要字段").fadeIn().delay(2000).fadeOut();
            }
        });

        // 实时表单验证
        const formInputs = document.querySelectorAll('#create-business-form input, #create-business-form select, #create-business-form textarea');
        formInputs.forEach(input => {
            input.addEventListener('blur', function() {
                validateField(this);
            });
        });

        // 日期验证逻辑
        $("#startDate, #endDate").on("change", function() {
            validateField(document.getElementById('startDate'));
            validateField(document.getElementById('endDate'));
        });
    });

    function validateForm() {
        let isValid = true;
        // 验证所有字段
        const formInputs = document.querySelectorAll('#create-business-form input, #create-business-form select, #create-business-form textarea');
        formInputs.forEach(input => {
            if (!validateField(input)) {
                isValid = false;
            }
        });
        return isValid;
    }

    function validateField(input) {
        const id = input.id;
        const value = input.value.trim();
        let errorMessage = '';

        switch (id) {
            case 'name':
                if (!value) {
                    errorMessage = '请输入业务名称';
                }
                break;
            case 'startDate':
                if (!value || !Validator.isDate(value)) {
                    errorMessage = '请选择有效的开始日期';
                } else if (document.getElementById('endDate').value && new Date(value) > new Date(document.getElementById('endDate').value)) {
                    errorMessage = '开始日期不能晚于结束日期';
                }
                break;
            case 'endDate':
                if (!value || !Validator.isDate(value)) {
                    errorMessage = '请选择有效的结束日期';
                } else if (document.getElementById('startDate').value && new Date(document.getElementById('startDate').value) > new Date(value)) {
                    errorMessage = '结束日期不能早于开始日期';
                }
                break;
            case 'status':
                if (!value) {
                    errorMessage = '请选择状态';
                }
                break;
            case 'revenue':
                if (!value || !Validator.isMoney(value) || value <= 0) {
                    errorMessage = '请输入有效的预计收入';
                }
                break;
        }

        const errorElement = document.getElementById(`${id}-error`);
        if (errorMessage) {
            errorElement.textContent = errorMessage;
            errorElement.style.display = 'block';
            input.classList.add('invalid');
            return false;
        } else {
            errorElement.style.display = 'none';
            input.classList.remove('invalid');
            return true;
        }
    }
</script>
</body>
</html>